<template>
  <div v-drag="imgList" class="photos_container">
    <div class="photos_line" v-for="(item, index) in imgList" :key="index">
      <div
        class="photos_img"
        v-for="(Imgitem, index) in item.imgLine"
        :key="index"
      >
        <img :src="Imgitem.src" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";

// 创建一个共享的状态
export default {
  name: "Photos",

  setup() {
    let imgList = reactive([
      {
        imgLine: [
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
          {
            src: require("../assets/images/0b94f68c996c2ec90b9ed17329cac073.png"),
          },
          {
            src: require("../assets/images/4_series_coupe_2020.png"),
          },
          {
            src: require("../assets/images/13b713d291d0e931bd71cda41d1809fd.png"),
          },
        ],
      },
      {
        imgLine: [
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
          {
            src: require("../assets/images/4205c0f7187736c100f497d3cddb30d5.png"),
          },
          {
            src: require("../assets/images/3a030b6f2556ab38c02bbe02d8df2b1a.png"),
          },
          {
            src: require("../assets/images/0a491b32fcdfb59db8da35f08f406750.png"),
          },
        ],
      },
      
    ]);
    const list = ref([1, 2, 3, 4, 5]);
    return {
      imgList,
      list,
    };
  },
  // 创建局部自定义指令
  directives: {
    drag: {
      mounted(el, binding) {
        // 从binding.value获取传递过来的响应式数组
        if (binding.value instanceof Array) {
          console.log(binding.value); // 输出：[1, 2, 3]
        }

        let numX = 0;
        let numY = 0;
        let dragX = 0;
        let dragY = 0;
        el.onmousedown = (ev) => {
          //鼠标点击位置
        let widthX = el.children[0].offsetWidth-el.offsetWidth;
        let box_height = el.offsetHeight;
        // console.log(widthX);
        // console.log(box_height);

        let heightY=(el.children[0].offsetHeight)*9;
        // console.log(heightY);
          const disX = ev.clientX;
          const disY = ev.clientY; // 需要上下移动可以加
          const originalScrollBehavior = el.style["scroll-behavior"];
          const originalPointerEvents = el.style["pointer-events"];
          el.style["scroll-behavior"] = "auto";
          // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
          document.onmousemove = (dv) => {
            dv.preventDefault();
            async function getNumXY() {
              const distanceX = dv.clientX - disX;
              const distanceY = dv.clientY - disY; // 需要上下移动可以加
              numX = distanceX + -dragX - -numX;
              numY = distanceY + -dragY - -numY;
              // console.log(numX, numY);
              dragX = distanceX;
              dragY = distanceY;
            }
            getNumXY().then(()=>{
              if (-numX >= widthX / 2|| numX >= widthX / 2) {
                numX = 0;
                console.log(numX);
              }
              if (-numY >=(heightY-box_height)/2|| numY >=(heightY-box_height)/2) {
                numY = 0;
                console.log(numY);
              }
              for (let i = 0; i < el.children.length; i++) {
              el.children[i].style[
                "transform"
              ] = `translate(${numX}px, ${numY}px)`;
              //获取当前元素第一个子节点
            }
            })
          };
          document.onmouseup = () => {
            dragX = 0;
            dragY = 0;
            document.onmousemove = null;
            document.onmouseup = null;
            el.style["scroll-behavior"] = originalScrollBehavior;
            el.style["pointer-events"] = originalPointerEvents;
          };
        };
      },
      updated(/* ... */) {
        // 更新钩子...
      },
    },
  },
};
</script>

<style scoped>
.photos_container {
  width: 100%;
  height: 100vh;
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  justify-content: center;
    align-items: center;
}
.photos_line {
  width: 300%;
  display: flex;
  justify-content: space-around;
}
.photos_img {
  width: 30%;
  height: 30vh;
  background: #e2e2e2;
  margin: 1em;
  transition: all 0.5s ease 0s;
  overflow: hidden;
  border-radius: 19px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.photos_img:hover > img {
  transform: scale(1.1);
}
.photos_img img {
  width: 100%;
  user-select: none;
  transition: all 0.5s ease 0s;
  pointer-events: none;
}
@keyframes rolling {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}
</style>